import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtList, AtListItem } from "taro-ui"

import music from '@assets/images/music.png'
import playing from '@assets/images/playing.png'
import tel from '@assets/images/tel.png'
import favorite from '@assets/images/favorite.png'

import './index.scss'

export default class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      lists: [
        {
          title: '本地音乐',
          num: 166,
          src: music
        },
        {
          title: '最近播放',
          num: 166,
          src: playing
        },
        {
          title: '我的电台',
          num: 166,
          src: tel
        },
        {
          title: '我的收藏',
          num: 166,
          src: favorite
        }
      ]
    }
  }
  config = {
    navigationBarTitleText: '我的音乐'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleClick (item) {
    console.log(item)
  }

  render () {
    return (
      <View className='my'>
        <AtList>
          {
            this.state.lists.map((item, index) => {
              return (
                <AtListItem
                  key={item + index}
                  title={item.title}
                  extraText={item.num}
                  onClick={this.handleClick.bind(this, item)}
                  arrow='right'
                  thumb={item.src}
                />
              )
            })
          }
        </AtList>
      </View>
    )
  }
}
